<template>
<div>
  <div style="margin-bottom: 10px;">
    <!--面包屑-->
    <a-breadcrumb>
      <a-breadcrumb-item href="">
        <a-icon type="home" />  首页
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        购物结算
      </a-breadcrumb-item>
    </a-breadcrumb>
  </div>
  <!--搜索框-->
  <div style="width: 40%;display: flex;justify-content: space-between">
    <a-input v-model="queryParams.orderSeq" allow-clear placeholder="请输入订单编号"  style="width: 150px">
    </a-input>
    <div>
      <a-select
          show-search
          allow-clear
          placeholder="订单状态"
          option-filter-prop="children"
          style="width: 150px"
          @change="handleSelect"
      >
        <a-select-option value="1">
          审核通过
        </a-select-option>
        <a-select-option value="0">
          审核失败
        </a-select-option>
      </a-select>
    </div>
    <a-button type="primary"  @click="onSearch" icon="search" style="width:85px;color: white">
      查询
    </a-button>
    <br /><br />
  </div>
  <!--数据表格-->
  <div>
    <a-table
        :columns="columns"
        :data-source="orders"
        :scroll="{y: 600 }"
        :loading="loading"
        :pagination="pagination"
        :current="pagination.current"
        @change="tableChange"
        bordered
        style="align-content: center"
    >
      <div slot="orderStatus" slot-scope="record">
        <a-tag color="blue">{{ record }}</a-tag>
      </div>
      <template
          slot="action"
          slot-scope="record"
      >
        <div style="display: flex;justify-content: space-around">
          <a-button
              slot="action"
              type="primary"
              @click="getInfo(record)"
          >订单详情
          </a-button>
        </div>
      </template>
    </a-table>
    <!--详情页面-->
    <div>
      <a-drawer
          title="审核"
          :width="720"
          :visible="visible"
          :body-style="{ paddingBottom: '80px' }"
          @close="onClose"
      >
        <a-form :form="form" layout="vertical" hide-required-mark>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="商品名称">
                <a-input />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="采购编号">
                <a-input

                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="类型">
                <a-input

                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="规格">
                <a-input

                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="数量">
                <a-input

                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="时间">
                <a-input

                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="审核状态">
                <a-select>
                  <a-select-option value="未审核"> 未审核 </a-select-option>
                  <a-select-option value="已通过"> 已通过 </a-select-option>
                  <a-select-option value="未通过"> 未通过 </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <div :style="{
                                      position: 'absolute',
                                      right: 0,
                                      bottom: 0,
                                      width: '100%',
                                      borderTop: '1px solid #e9e9e9',
                                      padding: '10px 16px',
                                      background: '#fff',
                                      textAlign: 'right',
                                      zIndex: 1,
                                    }"
        >
          <a-button type="primary" @click="onClose">
            关闭
          </a-button>
        </div>
      </a-drawer>
      <a-modal
          title="审核"
          :visible="modelVisible"
          :dialog-style="{ top: '20px' }"
          :width="720"
          okText="确认"
          cancelText="取消"
          @ok="modelHandleOk()"
          @cancel="modelCancel()"
      >
        <a-form :form="form" layout="vertical" hide-required-mark>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="商品名称">
                <a-input />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="采购编号">
                <a-input

                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="类型">
                <a-input

                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="规格">
                <a-input

                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="数量">
                <a-input

                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="时间">
                <a-input

                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="审核状态">
                <a-select>
                  <a-select-option value="未审核"> 未审核 </a-select-option>
                  <a-select-option value="已通过"> 已通过 </a-select-option>
                  <a-select-option value="未通过"> 未通过 </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-modal>
    </div>
  </div>
</div>
</template>

<script>
import {getOrders, getOrdersByParams} from '@/services/order/client_purchase_order'

const columns = [
  { title: '订单ID', width: '7%', dataIndex: 'clientPurchaseOrderId', key: 'orderSn', align: 'center' },
  { title: '订单流水号', width: '14%', dataIndex: 'purchaseOrderSeq', key: 'age', align: 'center' },
  { title: '客户编号', dataIndex: 'clientCode', key: '1', width: '12.5%', align: 'center' },
  { title: '支付方式', dataIndex: 'paymentTypeStr', key: '2', width: '11.5%', align: 'center' },
  { title: '订单金额', dataIndex: 'purchaseAmount', key: '2', width: '10%', align: 'center' },
  { title: '订单状态', dataIndex: 'orderStatusStr', key: 'orderStatus', width: '9%', align: 'center', scopedSlots: { customRender: 'orderStatus' }},
  { title: '创建时间', dataIndex: 'createTime', key: '3', width: '13.5%', align: 'center' },
  { title: '操作', align: 'center', key: 'operation', width: '10.5%', scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: "ClientPurchaseOrder.vue",
  data(){
    return {
      columns,
      loading: false,
      orders: [],
      queryParams:{
        orderSeq:'',
        orderStatus:'',
      },
      pagination: {
        total: 0,
        current: 1,
        defaultPageSize: 4,
         showSizeChanger: true,
         pageSizeOptions: ['5', '15', '30', '50']
      }
    }
  },
  created() {
    this.render_table_data();
  },
  methods: {
    /*
   获取订单数据
     */
   async render_table_data(){
     this.loading = true;
      let resp = await getOrders();
      this.loading = false;
      this.orders = resp;
     console.log(this.orders)
    },
   async onSearch(){
     this.loading = true;
     let res = await getOrdersByParams(this.queryParams);
     this.loading = false;
     this.orders = res;
    },
  /**
   *  监听table变化,更新当前页码
   */
  tableChange (e) {
    this.pagination.current = e.current
  },
    /*
    选择查询订单状态
     */
    handleSelect(value) {
      this.queryParams.orderStatus=value;
    },
  }
}
</script>

<style scoped>

</style>